<!--
 * @Author: sz
 * @Date: 2023-10-26 09:16:15
 * @LastEditors: sz
 * @LastEditTime: 2023-11-15 17:39:38
 * @Description: file content
-->
<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar" />
      <span class="name">{{ user.nickname }}</span>
      <a-modal
        v-model="show_change_password_modal"
        :title="$t('change_password')"
        wrapClassName="change-password-modal"
        @ok="changePassword"
        :confirmLoading="changing"
      >
        <a-form-model
          :model="change_password_form"
          :rules="change_password_form_rules"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 10 }"
          ref="change_password_form"
          :confirmLoading="changing"
        >
          <a-form-model-item label="旧密码" prop="old_password">
            <a-input v-model="change_password_form.old_password" placeholder="请输入旧密码" type="password" />
          </a-form-model-item>
          <a-form-model-item label="新密码" prop="password">
            <a-input v-model="change_password_form.password" placeholder="请输入新密码" type="password" />
          </a-form-model-item>
          <a-form-model-item label="再次输入新密码" prop="password2">
            <a-input v-model="change_password_form.password2" placeholder="请再次输入新密码" type="password" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item @click="show_change_password_modal = true">
        <a-icon type="setting" />
        <span>{{ $t('change_password') }}</span>
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item @click="logout">
        <a-icon style="margin-right: 8px" type="poweroff" />
        <span>{{ $t('logout') }}</span>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
import { logout, savePassword } from '@/services/user'

export default {
  name: 'HeaderAvatar',
  computed: {
    ...mapGetters('account', ['user'])
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value == this.change_password_form.old_password) {
        return callback(new Error('新密码与旧密码一致，请重新输入'))
      }
      callback()
    }
    const validatePassword2 = (rule, value, callback) => {
      if (value != this.change_password_form.password) {
        return callback(new Error('两次密码不一致，请重新输入'))
      }
      callback()
    }
    return {
      show_change_password_modal: false,
      change_password_form: {
        old_password: '',
        password: '',
        password2: ''
      },
      change_password_form_rules: {
        old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            validator: validatePassword,
            trigger: 'blur'
          }
        ],
        password2: [
          { required: true, message: '再次输入新密码', trigger: 'blur' },
          {
            validator: validatePassword2,
            trigger: 'blur'
          }
        ]
      },
      changing: false
    }
  },
  methods: {
    logout() {
      logout()
      this.$router.push('/login')
    },
    changePassword() {
      this.$refs['change_password_form'].validate(async valid => {
        this.changing = true
        if (valid) {
          try {
            await savePassword(this.change_password_form)
            this.show_change_password_modal = false
            this.$message.success('修改成功')
          } catch (e) {
            //
            this.$message.error(e.data.msg || '修改失败')
          }
        } else {
          this.$message.error('参数错误')
        }
        this.changing = false
      })
    }
  }
}
</script>

<style lang="less">
.header-avatar {
  display: inline-flex;

  .avatar,
  .name {
    align-self: center;
  }

  .avatar {
    margin-right: 8px;
  }

  .name {
    font-weight: 500;
  }
}

.avatar-menu {
  width: 150px;
}

.change-password-modal {
  .ant-modal-content {
    .ant-modal-body {
      padding: 0;
    }

    .ant-modal-header,
    .ant-modal-footer {
      border: 0;
    }
  }
}
</style>
